<template>
    <div class="note-list">
        <ul>
            <li v-for="item in noteList" :key="item.id" @click="goNoteDetail(item.id)">
                <div class="img">
                    <img :src="item.head_img" alt="">
                </div>
                <div class="time">{{ item.m_time }}</div>
                <div class="title">{{ item.title }}</div>
            </li>
        </ul>
    </div>
</template>

<script setup>
// 获取当前页面对于的数据，一进入页面就发生接s口请求
// 向后端发送某分类下的页面数据
import axios from "@/api";
import { ref } from "vue"
// 获取当前页面的参数
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const noteList = ref([])

// 1 .向后端请求某 分类下的日记数据
// axios.get('/findNoteListByType', {
//     params: {
//         note_type: route.query.title
//     }
// }).then((res) => {
//     console.log(res);
// });
// 2. 向后端请求某 分类下的日记数据
axios.get(`/findNoteListByType?note_type=${route.query.title}`)
    .then(res => {
        console.log(res.data);
        noteList.value = res.data
    })


const goNoteDetail = (id) => {
    router.push({ path: '/noteDetail', query: { id: id } })
}

</script>

<style lang="less" scoped>
.note-list {
    width: 100%;
    padding: 1rem 0.667rem 0;
    box-sizing: border-box;

    ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 50px;
        grid-row-gap: 30px;

        li {
            font-size: 0.37rem;

            img {
                width: 100%;
                height: 4rem;
                border-radius: 0.27rem;
            }

            title {
                margin-top: 5px;
            }
        }
    }
}
</style>